<template>
  <div class="blog-container">
    <div class="blog-header">
      <div
        class="blog-cover"
        :style="{
          'background-image': `url(${HttpManager.attachImageUrl(
            article.article_picture
          )})`,
        }"
      >
        <div class="blog-author" @click="showUserDetail">
          <img class="avator" :src="imageUrl" alt="" />
          <h3>{{ writter }}</h3>
        </div>
      </div>
    </div>

    <div class="blog-body">
      <div class="blog-title">
        <h1>
          <a href="#">{{ article.article_title }}</a>
        </h1>
        <button class="Btn" @click="addLike()">
          <span class="leftContainer">
            <svg
              fill="white"
              viewBox="0 0 512 512"
              height="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"
              ></path>
            </svg>
            <span class="like">Like</span>
          </span>
          <span class="likeCount"> {{ count }}</span>
        </button>
      </div>
      <div class="blog-summary">
        <p>{{ formatDate(article.article_data) }}</p>
        <p>
          {{ article.article_description }}
        </p>
        <p class="button-con">
          <button
            class="open"
            @click.self="isShow = isShow == false ? true : false"
          >
            展开评论
          </button>
        </p>
      </div>
    </div>

    <div class="blog-footer" v-show="isShow">
      <ul>
        <li
          class="comment slide-in-fwd-center"
          v-for="item in comments"
          :key="item.id"
        >
          <img
            class="comment-avator"
            :src="HttpManager.attachImageUrl(map.get(item.user_id))"
            alt=""
          />
          <div class="chat-bubble left">
            <div class="message-detail">{{ item.content }}</div>
          </div>
        </li>
      </ul>
      <!-- <el-input v-model="input" placeholder="Please input" />
        <el-button
          type="success"
          :icon="Check"
          circle
          @click="confirmComment()"
        /> -->
      <div class="input-group">
        <input
          placeholder="Enter new item here"
          type="text"
          id="input-field"
          v-model="input"
        />
        <button class="submit-button" @click="confirmComment()">
          <span>ADD</span>
        </button>
      </div>
    </div>
  </div>

  <!-- ------------------------------------------------------------------------- -->
  <div class="comments-container" v-if="false">
    <ul id="comments-list" class="comments-list">
      <li>
        <div class="comment-main-level slide-in-bck-top">
          <!-- Avatar -->
          <div class="comment-avatar" @click="showUserDetail">
            <img :src="imageUrl" alt="" />
          </div>
          <div class="comment-box">
            <div class="comment-head">
              <h6 class="comment-name">
                <a href="http://creaticode.com/blog">{{
                  writter + ":" + article.article_title
                }}</a>
              </h6>
              <span>{{ formatDate(article.article_data) }}</span>
              <div
                class="spread"
                @click="isShow = isShow == false ? true : false"
              >
                查看详情
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  class="bi bi-arrow-down"
                  viewBox="0 0 16 16"
                >
                  <path
                    fill-rule="evenodd"
                    d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"
                  />
                </svg>
              </div>
            </div>
            <div class="bar2">
              <div class="comment-head">
                {{ article.article_summary }}
              </div>
              <div class="stars" @click="addLike()">
                {{ article.like_count }}
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor star"
                  class="bi bi-star"
                  viewBox="0 0 16 16"
                >
                  <path
                    d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"
                  />
                </svg>
              </div>
            </div>
            <div class="article-img">
              <el-image
                class="personal-img slide-in-bck-top"
                fit="contain"
                :src="attachImageUrl(article.article_picture)"
              />
            </div>
            <div class="main-section slide-in-bck-top">
              <div class="comment-content">
                {{ article.article_description }}
              </div>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="currentColor"
                class="bi bi-trash3-fill toTrash"
                viewBox="0 0 16 16"
                v-if="canDelete"
                @click="deleteArticle()"
              >
                <path
                  d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"
                />
              </svg>
            </div>
          </div>
        </div>
      </li>

      <!-- 评论部分 -->
      <ul class="comments-list reply-list slide-in-bck-top" v-if="isShow">
        <li v-for="item in comments" :key="item.id">
          <div class="comment-avatar">
            <img
              :src="HttpManager.attachImageUrl(map.get(item.user_id))"
              alt=""
            />
          </div>
          <div class="comment-box">
            <div class="comment-head">
              <h6 class="comment-name">
                <a href="http://creaticode.com/blog">{{
                  map2.get(item.user_id)
                }}</a>
              </h6>
              <span>{{ formatDate(item.create_time) }}</span>
              <i class="fa fa-reply"></i>
              <i class="fa fa-heart"></i>
            </div>
            <div class="comment-content">
              {{ item.content }}
            </div>
          </div>
        </li>
        <div id="input">
          <el-input v-model="input" placeholder="请输入" />
          <el-button
            type="success"
            :icon="Check"
            circle
            @click="confirmComment()"
          />
        </div>
      </ul>
    </ul>
  </div>
</template>

<script lang="ts">
import { Check, Message } from "@element-plus/icons-vue";
import {
  defineComponent,
  toRefs,
  ref,
  onMounted,
  getCurrentInstance,
  computed,
  onBeforeMount,
} from "vue";
import { HttpManager } from "@/api";
import { formatDate } from "@/utils";
import "@icon-park/vue/styles/index.css";

export default defineComponent({
  emits: ["change", "selectConsumer"],
  props: ["article"],
  setup(props, ctx) {
    const { article } = toRefs(props);
    const { proxy } = getCurrentInstance();
    const isShow = ref(false);
    const comments = ref([]); //现有评论
    const input = ref("");
    const map = new Map();
    const map2 = new Map();
    const imageUrl = ref("");
    const writter = ref("");
    const canDelete = computed(
      () => proxy.$store.getters.userId == article.value.article_user
    );
    const count = ref("");
    count.value = article.value.like_count;

    //获取全部评论
    async function getComments() {
      const params = {
        article_id: article.value.article_id,
      };
      const result = (await HttpManager.getComments(params)) as ResponseBody;
      comments.value = result.data;
    }

    //上传并更新评论
    async function confirmComment() {
      if (!proxy.$store.getters.token) {
        (proxy as any).$message({
          message: "请登录",
        });
        return;
      }
      if (!input.value) {
        (proxy as any).$message({
          message: "请输入内容",
        });
        return;
      }
      const params = {
        article_id: article.value.article_id,
        create_time: new Date(),
        content: input.value,
        user_id: proxy.$store.getters.userId,
      };
      const result = (await HttpManager.addComment(params)) as ResponseBody;
      (proxy as any).$message({
        message: result.message,
        type: result.type,
      });

      if (result.success) {
        input.value = "";
        await getComments();
      }
    }

    //点赞
    async function addLike() {
      if (!proxy.$store.getters.userId) {
        (proxy as any).$message({
          message: "请先登录",
          type: "success",
        });
        return;
      }
      console.log(article.value.article_id, proxy.$store.getters.userId);
      const result = (await HttpManager.addLikeCount(
        article.value.article_id,
        proxy.$store.getters.userId
      )) as ResponseBody;
      if (result.success) {
        console.log("点赞成功");
        // proxy.$emit("change");
        count.value = result.data;
      }
    }

    async function deleteArticle() {
      const result = (await HttpManager.deleteArticle(
        article.value.article_id
      )) as ResponseBody;
      if (result.success) {
        proxy.$emit("change");
        (proxy as any).$message({
          message: "删除成功",
          type: "success",
        });
      }
    }

    onMounted(async () => {
      getComments();
      // getAvator(article.value.article_user);
    });

    //挂载之前先获取数据
    onBeforeMount(async () => {
      imageUrl.value = HttpManager.attachImageUrl(
        await getAvator(article.value.article_user)
      );
      writter.value = await getName(article.value.article_user);
      await getComments();
      for (let i = 0; i < comments.value.length; i++) {
        map.set(
          comments.value[i].user_id,
          await getAvator(comments.value[i].user_id)
        );
        map2.set(
          comments.value[i].user_id,
          await getName(comments.value[i].user_id)
        );
      }
    });

    async function getAvator(id) {
      const result = (await HttpManager.getUserOfId(id)) as ResponseBody;
      return result.data[0].avator;
    }

    async function getName(id) {
      const result = (await HttpManager.getUserOfId(id)) as ResponseBody;
      return result.data[0].username;
    }

    function showUserDetail() {
      proxy.$emit("selectConsumer", article.value.article_user);
    }

    return {
      count,
      map2,
      writter,
      imageUrl,
      map,
      comments,
      isShow,
      HttpManager,
      canDelete,
      attachImageUrl: HttpManager.attachImageUrl,
      Message,
      input,
      Check,
      confirmComment,
      formatDate,
      getAvator,
      getName,
      addLike,
      deleteArticle,
      showUserDetail,
    };
  },
});
</script>

<style lang="scss" src="../../assets/css/ForumBarTest.scss" scoped></style>
